<template>
    <div>

        <div v-for="item in modelList" :key="item.id">
            <div class="header">
                <!--<div class="icon">
                    <van-icon name="cross" size="40px" color="#333333"/>
                </div>-->
                <div>
                    <van-image round height="50px" width="50px" :src="item.userId_dicText[0].avatar"/>
                </div>

                <div class="text">
                    <p style="margin: 4px;font-size: 18px;" v-if="item.userId_dicText[0]!=undefined">
                        {{item.userId_dicText[0].realname}}</p>
                    <p style="margin: 4px;font-size: 15px">{{item.createTime | dateFormat}}</p>
                </div>

            </div>

            <div class="center">
                <van-button color="red" type="primary" url="http://www.baidu.com" text="请点击下载>"/>
            </div>


            <div>
                <div>
                    <video width="100%" v-if="item.isShareType==0" :src="url" controls="controls"
                           style="outline: none"></video>
                    <img v-else width="100%" :src="url" alt="">
                </div>
            </div>


            <div>
                <div>
                    <h2>{{item.title}}</h2>
                </div>

                <div class="content">
                    <span>
                        {{item.body}}
                    </span>
                </div>

                <div>
                    <div class="footer">
                        <span style="margin-right: 10px">收藏&nbsp;{{item.commentNum}}</span>
                        <span>浏览量&nbsp;{{item.viewsNum}}</span>
                    </div>
                </div>

            </div>
        </div>

    </div>


</template>

<script>
    import axios from 'axios';

    export default {
        name: "Home",
        data() {
            return {
                url: '',
                modelList: [],
                type: '',//分三种   1分享，圈子2，混合圈子3
                id: "",
            }
        },


        created() {
            this.ShareQueryId(); //http://192.168.2.157:9000/dist/index.html#/home?id=1329011076048539650&type=3
        },

        methods: {
            ShareQueryId: function () {
                this.id = this.$route.query.id;
                this.type = this.$route.query.type;
                if (this.id != null && this.type == 1) {
                    axios.get("/unite/bbShare/queryById?id=" + this.id + '&type=' + this.type).then(res => {
                        this.modelList = res.data.result
                        let url = res.data.result[0].url;
                        let newurl = url.split(",,");//this.url = url.substring(0,url.length-2)
                        this.url = newurl[0];
                    });
                } else if (this.id != null && this.type == 2) {
                    axios.get("/unite/bbRangeRecord/queryById?id=" + this.id + '&type=' + this.type).then(res => {
                        if (res.data.success) {
                            this.modelList = res.data.result;
                            let url = res.data.result[0].urls;
                            let newurl = url.split(",");//this.url = url.substring(0,url.length-2)
                            this.url = newurl[0];
                        } else {
                            this.error("查询失败")
                        }
                    });
                } else if (this.id != null && this.type == 3) {
                    axios.get("/unite/bbMixRangeRecord/queryById?id=" + this.id + "&type=" + this.type).then(res => {
                        if (res.data.success) {

                            this.modelList = res.data.result
                            let url = res.data.result[0].urls;
                            let newurl = url.split(",,");//this.url = url.substring(0,url.length-2)
                            this.url = newurl[0];
                        } else {
                            this.error("查询失败")
                        }
                    });
                }


            }


        },

        filters: {
            dateFormat(value) {
                var date = new Date(parseInt(value));
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                var D = date.getDate() + ' ';
                var df = Y + M + D;
                console.log(df);
                return df;
            }
        }

    }
</script>

<style scoped>
    .header {
        width: 100%;
        height: 52px;
        display: flex;
        justify-content: flex-start;
    }

    .icon {
        margin: 7px 4px;
    }

    .text {
        margin-left: 10px;
    }


    .content {
        color: #555555;
    }

    .footer {
        float: right;
        line-height: 55px;
        color: #999999;
    }

    .center {
        position: fixed;
        right: 0;
        margin-top: 150px;
    }


</style>
